<!DOCTYPE html>
<html lang="en">
<head>
    <base id="base" href="${rc.contextPath}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>驴妈妈统计系统</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet"
          id="main-ace-style"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/comment/progressbar.css"/>

    <script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
</head>
<style>
    th {
        text-align: center;
    }

    .average {
        margin-top: -20px;
        font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
        font-size: 12px;
        color: #808080;
    }
</style>
<body class="skin-2" style="background-color: #FFF;">
<!--评价排序table-->
<div class="tabbable">
    <div class="tab-content">
        <div id="manage" class="tab-pane active in">
            <div class="row">
                <div class="col-xs-12">
                    <!-- 筛选条件开始 -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 class="widget-title">产品需求预测表</h4>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                    <div class="widget-main">
                                        <form class="form-inline" id="searchForm" method="post" action="#">
                                            <div class="form-group">
                                                <label style="padding-left: 15px;">品类
                                                    <select data-placeholder="" class="chosen-select" id="categoryId">
                                                        <#list categories as cate>
                                                            <option value="${cate.value}" <#if categoryId?? && categoryId == cate.value>selected</#if>>${cate.showName!""}</option>
                                                        </#list>
                                                    </select>
                                                </label>
                                                <label style="margin-left: 15px;">产品ID
                                                    <input type="text" id="productId" name="productId"
                                                           placeholder="输入产品ID" style="width: 120px;">
                                                </label>
                                                <label style="margin-left: 15px;">产品名称
                                                    <input type="text" id="productName" name="productName"
                                                           placeholder="输入产品名称" style="width: 180px;">
                                                </label>
                                                <button id="salesNumPreBtn" type="button" class="btn btn-pink btn-sm"
                                                        style="margin-left: 50px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                    Search
                                                </button>

                                                <input type="text" hidden="true" id="_csrf" name="${_csrf.parameterName}" value="${_csrf.token}" />
                                                <input type="text" id="currentPage" hidden="true" value=1>
                                                <input type="text" id="pageSize" value=3 hidden="true">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 筛选条件结束 -->
                    <div style="color:#de6a57;height:30px;padding-top: 5px;">*注：需求量与评价量是成正比的</div>
                    <!--表格开始-->
                    <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                        <table id="salesNumPreTable" class="table table-striped table-bordered dataTable no-footer" aria-describedby="dynamic-table_info">
                            <thead>
                                <tr>
                                    <th style="width:100px; background-color: #F2F2F2;" rowspan="2">产品ID</th>
                                    <th style="width:270px; background-color: #F2F2F2;" rowspan="2">产品名称</th>
                                    <th style="width:180px; background-color: #F2F2F2;" rowspan="2">所属品类</th>
                                    <th style="width:120px; background-color: #F2F2F2;" rowspan="2">情感极性均值<br/>(历史以来)</th>
                                    <th colspan="3">上周</th>
                                    <th colspan="3">下周预测</th>
                                </tr>
                                <tr>
                                    <th style="width:200px; background-color: #F2F2F2;">上周日期</th>
                                    <th style="width:130px; background-color: #F2F2F2;">用户购买力</th>
                                    <th style="width:100px; background-color: #F2F2F2;">环比上周</th>
                                    <th style="width:200px; background-color: #F2F2F2;">预测日期</th>
                                    <th style="width:130px; background-color: #F2F2F2;">预测需求量</th>
                                    <th style="width:100px; background-color: #F2F2F2;">趋势图</th>
                                </tr>
                            </thead>
                            <tbody class="product_tr">
                            </tbody>
                        </table>

                        <#if page??>
                            <div class="ui-jqgrid">
                                <div id="grid-pager"
                                     class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
                                     dir="ltr">
                                    <div id="pg_grid-pager" class="ui-pager-control" role="group">
                                        <table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
                                               style="width: 100%; table-layout: fixed; height: 100%;" role="row"
                                               id="prePageTable">
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </#if>
                        <!-- 分页结束 -->
                    </div>
                    <!--表格结束-->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 弹窗 -->
<div class="row">
    <div class="col-xs-12">
        <button class="btn btn-info" data-toggle="modal" type="button" style="display:none;" id="lineChartModal" data-target="#myModal"></button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" id="modal-dialog">
                <div class="modal-content">
                    <div id="chartMore">
                        <div class="widget-header widget-header-small">
                            <button style="padding-right: 10px; padding-left: 10px; color: #C6487E;"
                                    type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                            <div>
                                <h4 style="font-size: 15px; color:#000;">
                                    <span>
                                        <span id="prodNameChart" class="label label-xlg label-grey arrowed-in-right arrowed-in"
                                              style="font-weight: bold; font-size: 14px;">
                                        </span>
                                        &nbsp;未来一周需求量预测趋势图
                                    </span>
                                    <label class="help_img">
                                        <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                        <span class='tips'><span>产品未来一周需求量预测趋势图</span></span>
                                    </label>

                                </h4>

                            </div>
                            <div class="widget-body" style="height: 400px;" id="lineChartDiv">
                                <div id="lineChart"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script src="${rc.contextPath}/assets/js/comment/dateSelector.js"></script>
<script src="${rc.contextPath}/javascripts/d3.min.js"></script>
<script src="${rc.contextPath}/javascripts/g2.js"></script>
<script src="${rc.contextPath}/javascripts/g2-modal.js"></script>
<script src="${rc.contextPath}/javascripts/slider.js"></script>
<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>

<script type="text/javascript">
    d3.select(self.frameElement).style("height", "1500px");
    $(document).ready(function () {
        $(".chosen-select").chosen();
        $(".chosen-select-deselect").chosen({ allow_single_deselect: true });
        $("#salesNumPreBtn").click();
    });

    $("#salesNumPreBtn").on("click", function () {
        searchSalesNumPredict(1, 3);
    });

    function searchSalesNumPredict(currentPage, pageSize) {
        var queryData = {};
        queryData[$("#_csrf").attr("name")] = $("#_csrf").val();
        queryData["currentPage"] = currentPage;
        queryData["pageSize"] = pageSize;
        queryData["productId"] = $("#productId").val();
        queryData["productName"] = $("#productName").val();
        queryData["categoryId"] = $("#categoryId").val();

        $.ajax({
            url: "${rc.contextPath}/predict/getPredictSalesNum",
            data: queryData,
            type: "POST",
            dataType: "json",
            beforeSend: function () {
                $("#salesNumPreBtn").attr("disabled", true);
                openPartialLayer($("#salesNumPreTable"));
            },
            success: function (data) {
                var html = "";
                if (data != null && null != data.page && null != data.page.list && data.page.list.length > 0) {
                    // 调整页码样式
                    changePageCss(data.page);
                    $.each(data.page.list, function (index, item) {
                        var productName = item.productName;
                        if (typeof productName == "string") {
                            productName = productName.replace("\"", "");
                        }
                        var predict = item.predictList;

                        html += "<tr><td style=\"vertical-align: middle;\" rowspan=\"" + item.forOrder + "\">" + item.productId +
                            "</td><td style=\"vertical-align: middle;\" rowspan=\"" + item.forOrder + "\">"
                            + productName + "</td><td style=\"vertical-align: middle;\" rowspan=\"" + item.forOrder + "\">" +
                            item.categoryName + "</td>" + getSenseType(item.senseType, item.forOrder) + "</td>" +
                            "<td>" + getWeekName(item.predictList[0].weekName, item.predictList[0].lastDate) + "</td><td>" +
                            fillNullData(item.predictList[0].lastPurchases) + "</td>" +
                            "<td style=\"vertical-align: middle;\" rowspan=\"" + item.forOrder + "\">" +
                            getLastPurchases(item.changeRate, item.fluctuated) + "</td>" +

                            "<td>" + getWeekName(item.predictList[0].weekName, item.predictList[0].date) + "</td><td>" +
                            fillNullData(item.predictList[0].salesNum) + "</td>" +

                            "<td style=\"vertical-align: middle;\" rowspan=\"" + item.forOrder + "\" id=\"pn" +
                            index + "\" data-productName=\"" + productName + "\">" +
                            "<div class=\"ui-pg-div\"><span onclick=\"getViewPoint(" + index + "," + item.productId +
                            ")\" class=\"ui-icon ace-icon fa fa-search-plus purple\"></span></div></td></tr>";

                        if (null != predict && predict.length > 0) {
                            $.each(predict, function (index1, item1) {
                                if (index1 > 0) {
                                    html += "<tr><td>" + getWeekName(item1.weekName, item1.lastDate) + "</td><td>" +
                                        fillNullData(item1.lastPurchases) + "</td><td>" + getWeekName(item1.weekName, item1.date) +
                                        "</td><td>" + fillNullData(item1.salesNum) + "</td></tr>";
                                }
                            });
                        }
                    });

                    // 分页
                    setPage(data);
                } else {
                    $(".ui-jqgrid").hide();
                    html += '<tr><td colspan="10"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
                }
                $("#salesNumPreTable tbody").html(html);
            },
            complete: function () {
                $("#salesNumPreBtn").attr("disabled", false);
                removeLoading($("#salesNumPreTable"));
            },
            error: function (XMLHttpRequest) {
                console.log(XMLHttpRequest);
            }
        });
    }

    function getWeekName(week, date) {
        if (isNull(date)) {
            return "--";
        } else {
            return date + " " + week;
        }
    }

    function fillNullData(data) {
        if (null == data) {
            return "--";
        } else {
            return data;
        }
    }

    function isNull(str) {
        if (null == str || "" == str || str == "null" || (typeof str == "string" && str.trim() == "")) {
            return true;
        }
        return false;
    }

    // 环比上周
    function getLastPurchases(lastPurchases, fluctuated) {
        var html = "";
        if (null == fluctuated || fluctuated == -1 || fluctuated == 0) {
            html += "--";
        } else if (fluctuated == 1) {
            html += "<strong><div style=\"background-color:#84db56;color:#fff;\">" +
                "<b style=\"font-size: 18px;\">↑</b> " + (lastPurchases * 100).toFixed(2) + "%</div></strong>";
        } else if (fluctuated == 2) {
            html += "<strong><div style=\"background-color:#ed6d5c;color:#fff;\">" +
                "<b style=\"font-size: 18px;\">↓</b> " + (parseLastPurchases(lastPurchases) * 100).toFixed(2)
                + "%</div></strong>";
        } else if (fluctuated == 3) {
            html += "持平";
        }
        return html;
    }

    // 环比上周负数处理
    function parseLastPurchases(lastPurchases) {
        if (typeof lastPurchases == "number" && lastPurchases < 0) {
            lastPurchases = Math.abs(lastPurchases);
        }
        return lastPurchases;
    }

    // 情感极性均值
    function getSenseType(senseType, forOrder) {
        var html = "<td style=\"vertical-align: middle;\" rowspan=\"" + forOrder + "\" class=\"average\">" + senseType +
            "<div class=\"progress_bar\" style=\"margin-top: -30px;\"><div class=\"pro-bar\">" +
            "<small class=\"progress_bar_title\"><span class=\"progress_left_number\">差评</span>" +
            "<span class=\"progress_number\">好评</span></small><span class=\"progress-bar-inner\"" +
            "style=\"background-color: ";
        var rate = ((senseType / 2) * 100).toFixed(2);
        if (null == senseType || senseType < 0 || senseType > 2) {
            return "";
        } else if (senseType >= 0 && senseType < 0.6667) {
            html += "#DD6555; width: " + rate;
        } else if (senseType >= 0.6667 && senseType < 1.3333) {
            html += "#EECB5F; width: " + rate;
        } else if (senseType >= 1.3333 && senseType <= 2) {
            html += "#7ECF51; width: " + rate;
        }

        html += "%;\" data-value=\"" + rate + "\"" + "data-percentage-value=\"" + rate + "\"></span></div></div>";
        return html;
    }

    // 弹窗
    function getViewPoint(index, productId) {

        $("#lineChart").empty();
        var productName = document.getElementById("pn" + index).getAttribute("data-productName");
        if (typeof productName == "string" && productName.length > 20) {
            $("#prodNameChart").html(productName.substring(0, 20) + "...");
        } else {
            $("#prodNameChart").html(productName);
        }

        var queryData = {};
        queryData[$("#_csrf").attr("name")] = $("#_csrf").val();
        queryData["productId"] = productId;

        $.ajax({
            url: "${rc.contextPath}/predict/getPredictSalesNumChart",
            data: queryData,
            type: "POST",
            dataType: "json",
            success: function (data) {
                var color = "#61A5E8";
                setTimeout(function () {
                	var exportForm = {
                		'headers':['预测时间','预测需求量'],
                		'cols':['预测时间','预测需求量']
                	};
                    lineChartNoSpider(data, 'lineChart', '预测时间', '预测需求量', color, '预测时间', '预测需求量', '360', "","",exportForm)
                }, 500);
            },
            error: function(XMLHttpRequest) {
                console.log(XMLHttpRequest);
            }
        });

        $("#lineChartModal").click();
    }

    // 页码样式
    function changePageCss(data) {
        if (data != null && data.pages > 1) {
            $("#currentPage").val(data.pageNum);
            $(".ui-jqgrid").show();
        } else {
            $(".ui-jqgrid").hide();
        }
    }

    // 翻页
    function showPage(param) {
        var pages = parseInt($("#sp_1_grid-pager")[0].innerText);
        var currentPage = parseInt($("#currentPage").val());
        var pageSize = $("#pageSize").val();
        var flag = 0;
        if ('firstPage' == param) {
            currentPage = 1;
        } else if ('prePage' == param) {
            if (currentPage == 1) {
                currentPage == 1;
                flag = 1;
            } else {
                currentPage = currentPage - 1;
            }
        } else if ('nextPage' == param) {
            if (currentPage == pages) {
                currentPage = pages;
                flag = 1;
            } else {
                currentPage = currentPage + 1;
            }
        } else if ('lastPage' == param) {
            currentPage = pages;
        }
        if (flag == 0) {
            searchSalesNumPredict(currentPage, pageSize);
        }
    }

    // 分页
    function setPage(data) {
        var pageHtml = "<tr><td id=\"grid-pager_left\" align=\"left\"></td>" +
            "<td id=\"grid-pager_center\" align=\"center\"  style=\"white-space: pre; width: 343px;\">" +
            "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" " +
            "style=\"table-layout: auto; margin-top: 10px;\" class=\"ui-pg-table\"><tbody>" +
            "<tr><td id=\"first_grid-pager\" onclick=\"showPage('firstPage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if (data.page.isFirstPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-double-left bigger-140\"></span></td>" +
            "<td id=\"prev_grid-pager\" onclick=\"showPage('prePage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if (data.page.isFirstPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-left bigger-140\"></span></td>" +
            "<td dir=\"ltr\">Page <input class=\"ui-pg-input\" id=\"page_num\" " +
            "type=\"text\" size=\"2\" maxlength=\"7\" disabled=\"true\" " +
            "value=\"" + data.page.pageNum + "\" role=\"textbox\"> of <span " +
            "id=\"sp_1_grid-pager\">" + data.page.pages + "</span></td>" +
            "<td id=\"next_grid-pager\" onclick=\"showPage('nextPage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if (data.page.isLastPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-right bigger-140\"></span></td>" +
            "<td id=\"last_grid-pager\" onclick=\"showPage('lastPage')\" " +
            "class=\"ui-pg-button ui-corner-all ";

        if (data.page.isLastPage) {
            pageHtml += "ui-state-disabled";
        }

        pageHtml += "\" style=\"cursor: pointer;\"><span " +
            "class=\"ui-icon ace-icon fa fa-angle-double-right bigger-140\"></span></td>" +
            "</tr></tbody></table></td><td id=\"grid-pager_right\" align=\"right\">" +
            "<div dir=\"ltr\" style=\"text-align: right; margin-top: 10px;\" class=\"ui-paging-info\">View " +
            "<span id=\"view_start_row\">" + data.page.startRow + "</span> - <span id=\"view_end_row\">" +
            data.page.endRow + "</span> of <span id=\"view_page_total\">" +
            data.page.total + "</span></div></td></tr>";

        $("#prePageTable tbody").html(pageHtml);
    }
</script>
</body>
</html>